<template>
  <view class="edit-profile-container">
    <!-- 头像上传 -->
    <view class="avatar-upload">
      <up-upload
        :fileList="fileList"
        @afterRead="afterRead"
        @delete="deletePic"
        name="avatar"
        :maxCount="1"
        width="160rpx"
        height="160rpx"
      >
        <view
          style="
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
          "
        >
          <up-avatar
            :size="80"
            :src="form.avatar || '/static/avatar.png'"
          ></up-avatar>
          <view class="upload-tip">点击修改头像</view>
        </view>
      </up-upload>
    </view>

    <!-- 表单区域 -->
    <view class="form-container">
      <up-form :model="form" ref="uForm" label-width="6em">
        <up-form-item label="姓名" prop="nickname" borderBottom>
          <up-input
            v-model="form.nickname"
            placeholder="请输入姓名"
            border="bottom"
            :disabled="false"
          ></up-input>
        </up-form-item>

        <up-form-item label="手机号" prop="phone" borderBottom>
          <up-input
            v-model="form.phone"
            placeholder="请输入手机号"
            border="none"
            disabled
            disabledColor="#ffffff"
            readonly
          >
            <template #suffix>
              <u-button
                open-type="getPhoneNumber"
                @getphonenumber="handleGetPhoneNumber"
                type="primary"
                size="small"
                shape="circle"
                >获取手机号</u-button
              >
            </template>
          </up-input>
        </up-form-item>
      </up-form>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-btn">
      <up-button type="primary" text="保存修改" @click="submitForm"></up-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, computed, toValue } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { useUserStore } from "@/store/modules/user";

const userStore = useUserStore();

// 表单数据
const form = reactive({
  avatar: userStore.userInfo?.avatar_url || "",
  nickname: userStore.userInfo?.nickname || "",
  phone: userStore.userInfo?.phone || "",
});

// 上传组件相关
const fileList = ref<any[]>([]);
const afterRead = (event: any) => {
  // 这里处理图片上传逻辑
  const file = event.file[0];
  form.avatar = file.url;
};
const deletePic = () => {
  form.avatar = "";
};

function formatter(type: string, value: any) {
  switch (type) {
    case "year":
      return value + "年";
    case "month":
      return value + "月";
    case "day":
      return value + "日";
    default:
      return value;
  }
}

// 表单提交
// 在表单提交方法中添加手机号验证
const submitForm = () => {
  if (!/^1[3-9]\d{9}$/.test(form.phone)) {
    uni.showToast({ title: "请输入正确的手机号", icon: "none" });
    return;
  }

  uni.showLoading({ title: "提交中..." });
  // 这里调用API提交表单数据
  setTimeout(() => {
    uni.hideLoading();
    uni.showToast({ title: "修改成功", icon: "success" });
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  }, 1000);
};

// 页面加载时获取用户信息
onLoad(() => {});

// 在script部分添加跳转方法
const toEditPhone = () => {
  uni.navigateTo({
    url: "/pages/user/edit-phone",
  });
};

async function handleGetPhoneNumber(e: any) {
  if (e.detail.code) {
    const result = await userStore.fetchGetPhoneNumber(e.detail.code);
    if (result) {
      form.phone = result;
      uni.showToast({ title: "手机号获取成功", icon: "success" });
    } else {
      uni.showToast({ title: "手机号获取失败，请重试", icon: "none" });
    }
  }
}
</script>

<style lang="scss" scoped>
.edit-profile-container {
  background: linear-gradient(to bottom, #2979ff 40%, #f7f7f7 0%);
  padding-bottom: 40rpx;

  .avatar-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40rpx 0;
    margin-bottom: 20rpx;

    .upload-tip {
      text-align: center;
      font-size: 24rpx;
      color: #fff;
      margin-top: 16rpx;
      background: rgba(255, 255, 255, 0.2);
      padding: 6rpx 16rpx;
      border-radius: 20rpx;
    }
  }

  .form-container {
    background-color: #fff;
    padding: 0 30rpx;
    margin: 0 20rpx;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

    ::v-deep .u-form-item {
      padding: 24rpx 0;

      .u-form-item__body {
        padding: 0;
      }
    }
  }

  .submit-btn {
    margin: 60rpx 30rpx 0;

    ::v-deep .u-button {
      height: 88rpx;
      border-radius: 44rpx;
      font-size: 32rpx;
    }
  }

  // 美化选择器
  ::v-deep .u-picker {
    .u-picker__toolbar {
      background-color: #f7f7f7;
      border-radius: 30rpx 30rpx 0 0;

      .u-picker__title {
        font-weight: bold;
      }
    }

    .u-picker__action {
      color: #2979ff;
    }
  }

  ::v-deep .u-datetime-picker {
    .u-datetime-picker__toolbar {
      background-color: #f7f7f7;
      border-radius: 30rpx 30rpx 0 0;
    }
  }
}
</style>
